<template>
	<div class="My">
		<div class="my_one">
			<router-link to="/settings"><span>设置</span></router-link>
			<span>客服</span>
		</div>
		<div class="my_two">
			<div class="tou">
				<el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" size="large" />
				<div class="my_two_big" @click="toPersonal">
					<span style="font-weight: bold;font-size: 18px">123456789</span>
					<div style="font-size: 10px;color: #999999">
						<span>提升实名等级</span>
						<span>成长值</span>
					</div>
				</div>
			</div>
			<van-image width="135" height="48" fit="cover" :src="ZouLu" />
		</div>
		<div class="my_three">
			<van-grid route>
				<van-grid-item @click="this.$router.push({path:'/cart',query:{active:0}})" icon="cart-o" text="购物车" />
				<van-grid-item to="/cart" @click="this.$router.push({path:'',query:{active:1}})" icon="star-o"
					text="收藏" />
				<van-grid-item to="/myFootprint" icon="smile-comment-o" text="足迹" />
				<van-grid-item to="/myAssetsList" icon="balance-pay" text="红包卡卷" />
			</van-grid>
		</div>
		<div class="my_four">
			<div class="my_dingdan">
				<span @click="this.$router.push('/order')">我的订单</span>
				<!--  vue-router  -->
				<span @click="this.$router.push('/order')">全部订单
					<van-icon name="arrow" />
				</span>
			</div>
			<div>
				<van-grid route column-num="5">
					<van-grid-item to="/order" icon="credit-pay" text="待付款" />
					<van-grid-item to="/order" icon="logistics" text="待收货" />
					<van-grid-item to="/order" icon="clock-o" text="待使用" />
					<van-grid-item to="/order" icon="more-o" text="待评价" />
					<van-grid-item to="/order" icon="after-sale" text="退款\售后" />

				</van-grid>
			</div>
		</div>
		<div class="my_five">
			<div class="jieqian">
				<span style="font-size: 10px"><span style="font-size: 20px;font-weight: bold">1</span>万</span>
				<span style="font-size: 14px">吃了么借钱</span>
				<span style="font-size: 8px;color: #999999">大约可借</span>
			</div>
			<div class="jieqian">
				<span style="font-size: 10px"><span style="font-size: 20px;font-weight: bold">1</span>个</span>
				<span style="font-size: 14px">下月特权</span>
				<span style="font-size: 8px;color: #999999">本月消费</span>
			</div>
			<div class="jieqian">
				<span style="font-size: 10px"><span style="font-size: 20px;font-weight: bold">16.1</span>元</span>
				<span style="font-size: 14px">未领取</span>
				<span style="font-size: 8px;color: #999999">消费奖励</span>
			</div>
			<div class="jieqian">
				<span style="font-size: 10px"><span style="font-size: 20px;font-weight: bold">1</span>万</span>
				<span style="font-size: 14px">吃了么借钱</span>
				<span style="font-size: 8px;color: #999999">大约可借</span>
			</div>
			<div class="jieqian">
				<van-icon size="25px" name="pending-payment" />
				<span style="font-size: 14px">我的钱包</span>
				<span style="font-size: 8px;color: #999999">查看返利到账</span>
			</div>
		</div>
		<div class="my_four">
			<div class="my_dingdan">
				<span>福利中心</span>
				<span>点我领福利
					<van-icon name="arrow" />
				</span>
			</div>
			<div class="fuli">
				<van-grid :border="false" :column-num="5" v-for="index in fuli" :key="index">
					<van-grid-item>
						<van-image width="48" height="48" :src="index.url" />
						<span style="font-size: 6px">{{ index.describe }}</span>
					</van-grid-item>
				</van-grid>
			</div>
		</div>
		<div class="tout">
			<van-image fit="cover" :src="Toulan1" />
		</div>
		<div class="tout bottom">
			<van-image fit="cover" :src="Toulan2" />
		</div>
	</div>
</template>
<script>
	import zoulu from '../assets/zoulu.png'
	import toulan1 from '../assets/toulan.png'
	import toulan2 from '../assets/toulan2.png'

	export default {
		data() {
			return {
				ZouLu: zoulu,
				Toulan1: toulan1,
				Toulan2: toulan2,
				fuli: [{
						describe: "提现100",
						url: require("../assets/xjhb.png")
					},
					{
						describe: "领红包",
						url: require("../assets/puke.png")
					},
					{
						describe: "贪吃蛇",
						url: require("../assets/xyx.png")
					},
					{
						describe: "领水果",
						url: require("../assets/sl.png")
					},
					{
						describe: "赚一赚",
						url: require("../assets/csy.png")
					},
				]
			}
		},
		mounted() {
			this.getInfo();
		},
		methods: {
      toPersonal(){
        this.$router.push('/personal');
      },
			getInfo() {
				//调用接口让过滤器拦截页面
				this.$axios.get('/dishes/test')
					.then(res => {
						console.log("res="+res);
					})
			},
		},
	};
</script>
<style scoped>
	.My {
		background: #f4f4f4;
	}

	.my_one {
		display: flex;
		flex-direction: row-reverse;
		height: 30px;
		margin: 0 15px 15px 15px;
		padding-top: 15px;
		align-items: center;
	}

	.my_one span {
		margin-left: 20px;
	}

	.my_two {
		display: flex;
		margin: 15px;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.tou {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.my_three {
		margin: 15px;
	}

	.my_four {
		margin: 15px;
		background: white;
	}

	.my_dingdan {
		display: flex;
		justify-content: space-between;
		padding: 10px;
	}

	.my_five {
		display: flex;
		background: white;
		flex-direction: row;
		margin: 10px 15px 10px 15px;
		justify-content: space-around;
	}

	.jieqian {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 10px 0 10px 0;
	}

	.fuli {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tout {
		margin: 10px 15px 10px 15px;
		color: #999999;
	}
	.bottom{
		margin-bottom: 50px;
	}
</style>
